import React from 'react'
import { Table, Pagination, Popover } from 'antd'
import '../batchRecord/search.css'
import styles from '@/components/batchRecord/table.scss'
import util from '@/utils'
import tableStyles from './table.scss'
import colors from '@/constants/colors'

const { Column } = Table

const SendRecordTable = (props) => {
  const { pageNum, pageSize, total, loading, data, operatorEnum, messageStatusEnum, onChangePagination } = props

  const statusColor = {
    1:colors.statusSending,
    2:colors.statusSubmitSuccess,
    3:colors.statusSendSuccess,
    4:colors.statusSubmitFail,
    5:colors.statusSendFail,
  }

  return (
    <div>
      <Table dataSource={data} pagination={false} loading={loading} rowKey={({id}) => id} scroll={{ x: 1556 }} >
        <Column title="手机号码" dataIndex="phone" align="center" width={130} />
        <Column title="归属地" dataIndex="province" align="center" width={90}/>
        <Column title="运营商" dataIndex="operator" render={(value) => (util.getEnumDesc(operatorEnum, value))} align="center" width={90}/>
        <Column title="短信内容" dataIndex="content" width={200} render={(props) => (
          <Popover content={props} trigger="click">
            <div className="single-line text-l">
              {props}
            </div>
          </Popover>
        )}/>
        <Column title="短信条数" dataIndex="num" align="center" width={90}/>
        <Column title="发送状态" dataIndex="status" render={(value) => (
          <span style={{color: statusColor[value]}}>{util.getEnumDesc(messageStatusEnum, value)}</span>
        )} align="center" width={90}/>
        <Column title="状态描述" width={200} dataIndex="result" align="center" render={(props) => (
          <Popover content={props} trigger="click">
            <div className="single-line">
              {props}
            </div>
          </Popover>
        )} className={tableStyles['status-desc']}/>
        <Column title="发送时间" dataIndex="sendTime" render={(props) => util.transformTimeStampToString(props)}  align="center" width={150} />
        <Column title="接收时间" dataIndex="receiveTime" render={(props) => util.transformTimeStampToString(props)}  align="center" width={150}/>
        <Column title="批次编号" dataIndex="batchId" align="center" width={180}/>
        <Column title="消息编号" dataIndex="messageId" align="center" width={180}/>
      </Table>
      {!!total && <div className={styles["pagination-container"]}>
        <Pagination 
          className={styles["pagination"]} 
          showQuickJumper 
          showTotal={(total, range) => `共${total}条`} 
          pageSize={pageSize} 
          current={pageNum}
          total={total} 
          onChange={onChangePagination} 
        />
      </div>
      }
    </div>
  )
}

export default SendRecordTable